리액트기초_02_JSX와 컴포넌트

1. JSX (JavaScript XML)

자바스크립트 안에서 HTML처럼 생긴 코드를 쓰는 문법.
브라우저는 JSX를 이해하지 못하므로, 빌드 시(Babel 등) React.createElement() 함수 호출로 변환된다.

// 우리가 작성하는 코드
const element = <h1>Hello, world!</h1>;

// 실제 변환된 코드
const element = React.createElement('h1', null, 'Hello, world!');

2. 컴포넌트 (Component)

UI를 독립적이고 재사용 가능한 조각으로 나눈 것.
"입력(Props)을 받아서 화면(React Element)을 리턴하는 함수"로 이해하면 쉽다.

3. Props와 State

리액트 데이터 흐름의 두 축.

A. Props (Properties)

• 부모가 자식에게 내려주는 데이터.
• 자식 입장에서는 읽기 전용(Read-only). 절대 수정할 수 없다. (불변성)
• "함수의 매개변수(Parameter)"와 비슷함.

B. State (상태)

• 컴포넌트 내부에서 관리되는 데이터.
• 시간이 지나거나 사용자 상호작용에 의해 변경될 수 있음.
• State가 바뀌면 리액트는 해당 컴포넌트(와 자식들)를 리렌더링한다.